<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Artalk Normal Example</title>
  <!-- 1. 引入 Artalk.css -->
  <link rel="stylesheet" href="/dist/Artalk.css">
</head>
<body>

  <h1>Artalk Normal Example</h1>

  <div class="main">
    <div id="ArtalkComments"></div>
  </div>

  <!-- 2. 引入 Artalk.js -->
  <script src="/dist/Artalk.js"></script>
  <!-- 3. 配置 Artalk -->
  <script>
  var artalk = new Artalk({
    el: '#ArtalkComments', // 元素选择
    placeholder: '来啊，快活啊 ( ゜- ゜)', // 占位符
    noComment: '快来成为第一个评论的人吧~', // 无评论时显示
    defaultAvatar: 'mp', // 参考 https://cn.gravatar.com/site/implement/images/#default-image
    pageKey: 'Artalk Normal Example',
    serverUrl: 'http://localhost:23366/',
    readMore: { // 阅读更多配置
      pageSize: 15, // 每次请求获取评论数
      autoLoad: true // 滚动到底部自动加载
    }
  })
  </script>
</body>
</html>
